<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="scrollbar-style.html">
<link rel="import" href="tensorboard-color.html">
<!--
Generic layout for a dashboard.
-->
<dom-module id="tf-dashboard-layout">
  <template>
    <div id="sidebar">
      <content select=".sidebar"></content>
    </div>

    <div id="center" class="scrollbar">
      <content select=".center"></content>
    </div>
    <style include="scrollbar-style"></style>
    <style>
      #sidebar {
        width: inherit;
        height: 100%;
        background-color: var(--tb-grey-darker);
        background-image: linear-gradient(to right, var(--tb-grey-lighter), var(--tb-grey-lighter));
        overflow: ellipsis;
        padding-left: 10px;
        padding-right: 10px;
        flex-grow: 0;
        flex-shrink: 0;
      }

      #center {
        margin: 0 10px;
        height: 100%;
        overflow-y: scroll;
        padding-right: 12px;
        flex-grow: 1;
        flex-shrink: 1;
      }
      :host {
        display: flex;
        flex-direction: row;
        height: 100%;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-dashboard-layout",
    });
  </script>
</dom-module>
